<template>
  <div class="app-container">
    <el-form v-show="showSearch" ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
      <el-form-item label="所属渠道" prop="deptId">
        <el-select v-model="queryParams.deptId" filterable placeholder="请选择渠道" style="width:200px;">
          <el-option
            v-for="item in options"
            :key="item.deptId"
            :label="item.deptName"
            :value="item.deptId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="产品名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入产品名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <!-- <el-form-item label="机构信息" prop="info">
        <el-input
          v-model="queryParams.info"
          placeholder="请输入机构信息"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <el-form-item label="投放城市" prop="cityId">
        <el-input
          v-model="queryParams.city"
          placeholder="请输入投放城市"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['product:product:add']"
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增</el-button>
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['product:product:export']"
        >导出</el-button>
      </el-col> -->
      <right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
    </el-row>

    <el-table v-loading="loading" :header-cell-style="{background: $store.state.app.theme.tableBack,color: $store.state.app.theme.tableColor}" :data="productList" @selection-change="handleSelectionChange">
      <el-table-column label="产品编号" align="center" prop="productId" />
      <el-table-column label="渠道名称" align="center" prop="deptName" width="120" :show-overflow-tooltip="true" />
      <el-table-column label="产品名称" align="center" prop="name" width="120" :show-overflow-tooltip="true" />
      <el-table-column label="派单状态" align="center" prop="pdStatus" width="120" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <el-tooltip v-if="scope.row.pdStatus" class="item" effect="dark" content="正常状态" placement="right">
            <el-tag type="success" size="small">开启</el-tag>
          </el-tooltip>
          <el-tooltip v-else class="item" effect="dark" :content="scope.row.pdMsg" placement="right">
            <el-tag type="danger" size="small">关闭</el-tag>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="投放城市" align="center" prop="city" width="190" :show-overflow-tooltip="true" />
      <el-table-column label="日投放量" align="center" prop="todayNum" />
      <el-table-column label="产品单价" align="center" prop="price" />
      <el-table-column label="最低额度" align="center" prop="lowAmount" />
      <el-table-column label="最高额度" align="center" prop="highAmount" />
      <el-table-column label="状态" align="center" class-name="small-padding fixed-width" width="150">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#bebdbf"
            @change="statusUpList(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">
        <template slot-scope="scope">
          <el-link v-hasPermi="['product:product:edit']" style="font-size:12px;margin-right:5px;" icon="el-icon-edit" type="primary" :underline="false" @click="handleUpdate(scope.row)">修改 </el-link>
          <el-link v-hasPermi="['product:product:edit']" style="font-size:12px;margin-right:5px;" icon="el-icon-setting" type="success" :underline="false" @click="handleZZ(scope.row)">投放配置 </el-link>
          <el-link v-hasPermi="['product:product:remove']" style="font-size:12px;" icon="el-icon-delete" type="danger" :underline="false" @click="handleDelete(scope.row)">删除</el-link>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改产品对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
        <el-form-item label="所属渠道" prop="deptId">
          <el-select v-model="form.deptId" filterable placeholder="请选择渠道" style="width:200px;">
            <el-option
              v-for="item in options"
              :key="item.deptId"
              :label="item.deptName"
              :value="item.deptId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="产品名称" prop="name">
          <el-input v-model="form.name" style="width:80%;" placeholder="请输入产品名称" />
        </el-form-item>
        <el-form-item label="产品logo" prop="logo">
          <el-input v-model="form.logo" placeholder="请上传logo" style="width:80%;">
            <template slot="append"><el-button slot="append">点击上传</el-button></template>
          </el-input>
        </el-form-item>
        <el-form-item label="产品单价" prop="price">
          <el-input v-model="form.price" style="width:80%;" placeholder="请输入产品单价" />
        </el-form-item>
        <el-form-item label="产品标签" prop="tag">
          <el-input v-model="form.tag" style="width:80%;" placeholder="请输入产品标签" />
        </el-form-item>
        <el-form-item label="机构信息" prop="info">
          <el-input v-model="form.info" style="width:80%;" placeholder="请输入机构信息" />
        </el-form-item>
        <el-form-item label="贷款额度" required>
          <el-col :span="10">
            <el-form-item prop="lowAmount">
              <el-input v-model="form.lowAmount" placeholder="最低贷款额度 (万元)" />
            </el-form-item>
          </el-col>
          <el-col :span="2" style="text-align:center;">-</el-col>
          <el-col :span="10">
            <el-form-item prop="highAmount">
              <el-input v-model="form.highAmount" placeholder="最高贷款额度 (万元)" />
            </el-form-item>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 资质筛选对话跨国 -->
    <el-dialog title="投放配置" :visible.sync="openzz" width="750px" append-to-body>
      <el-form ref="tf_form" :model="tf_form" :rules="rules" label-width="110px">
        <el-form-item label="日投放量" prop="todayNum">
          <el-input v-model="tf_form.todayNum" style="width:80%;" placeholder="请输入日投放量" />
        </el-form-item>
        <el-form-item label="投放城市" prop="city">
          <el-input v-model="tf_form.city" style="width:80%;" placeholder="请选择投放城市" disabled />
        </el-form-item>
        <el-form-item label="请选择省份">
          <el-select v-model="citySHengstr" filterable placeholder="请选择省份" style="width:200px;" @change="getCityS">
            <el-option
              v-for="item in citySHeng"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="请选择城市">
          <div v-if="citySHengstr != ''">
            <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
            <div style="margin: 15px 0;" />
            <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
              <el-checkbox v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox>
            </el-checkbox-group>
          </div>
          <div v-else style="color:#ccc;">
            请优先选择省份
          </div>
        </el-form-item>
        <el-form-item label="投放星期 " prop="openWeek">
          <el-checkbox-group v-model="tf_form.openWeek">
            <el-checkbox label="1">星期一</el-checkbox>
            <el-checkbox label="2">星期二</el-checkbox>
            <el-checkbox label="3">星期三</el-checkbox>
            <el-checkbox label="4">星期四</el-checkbox>
            <el-checkbox label="5">星期五</el-checkbox>
            <el-checkbox label="6">星期六</el-checkbox>
            <el-checkbox label="0">星期天</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="投放时间" prop="startTime">
          <el-col :span="8">
            <el-form-item prop="startTime">
              <!-- <el-date-picker clearable size="small"
                v-model="tf_form.startTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择开启时间" style="width: 100%;">
              </el-date-picker> -->
              <el-time-picker
                v-model="tf_form.startTime"
                size="small"
                value-format="HH:mm:ss"
                :picker-options="{
                  selectableRange: '00:00:00 - 23:59:59'
                }"
                placeholder="选择开启时间"
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
          <el-col :span="2" style="text-align:center;">-</el-col>
          <el-col :span="8">
            <el-form-item prop="endTime">
              <el-time-picker
                v-model="tf_form.endTime"
                size="small"
                value-format="HH:mm:ss"
                :picker-options="{
                  selectableRange: '00:00:00 - 23:59:59'
                }"
                placeholder="选择结束时间"
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="年龄限制" required>
          <el-col :span="8">
            <el-form-item prop="lowAge">
              <el-input v-model="tf_form.lowAge" placeholder="最低年龄" />
            </el-form-item>
          </el-col>
          <el-col :span="2" style="text-align:center;">-</el-col>
          <el-col :span="8">
            <el-form-item prop="highAge">
              <el-input v-model="tf_form.highAge" placeholder="最高年龄" />
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="芝麻分 " prop="zhimaCredit">
          <el-checkbox-group v-model="tf_form.zhimaCredit">
            <el-checkbox label="1">600分以下</el-checkbox>
            <el-checkbox label="2">600-650分</el-checkbox>
            <el-checkbox label="3">650-700分</el-checkbox>
            <el-checkbox label="4">700分以上</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="资质需求" prop="zizhiNeed">
          <el-checkbox-group v-model="tf_form.zizhiNeed">
            <el-checkbox label="1">有社保</el-checkbox>
            <el-checkbox label="2">有公积金</el-checkbox>
            <el-checkbox label="3">有保险保单</el-checkbox>
            <el-checkbox label="4">有车</el-checkbox>
            <el-checkbox label="5">有房</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="条件关系" prop="allMeet">
          <el-radio-group v-model="tf_form.allMeet">
            <el-radio :label="0">选中满足一项即可</el-radio>
            <el-radio :label="1">选中都需要</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitFormZZ">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listProduct, delProduct, addProduct, updateProduct } from '@/api/product/product'
import { getChannel, getCity } from '@/api/xxc'

export default {
  name: 'Product',
  data() {
    return {
      value: false,
      checkAll: false,
      // 选中的
      checkedCities: [],
      // 所有的城市
      cities: [],
      cityVal: [],
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: false,
      // 总条数
      total: 0,
      // 产品表格数据
      productList: [],
      // 弹出层标题
      title: '',
      options: [],
      // 是否显示弹出层
      open: false,
      // 是否显示资质筛选弹出层
      openzz: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        deptId: undefined,
        deptName: undefined,
        name: undefined,
        logo: undefined,
        todayNum: undefined,
        price: undefined,
        tag: undefined,
        info: undefined,
        cityId: undefined,
        openWeek: [],
        startTime: undefined,
        endTime: undefined,
        lowAmount: undefined,
        highAmount: undefined
      },
      // 存储所有的省份
      citySHeng: [],
      citySHengstr: '',
      city: [],
      cityData: [],
      // 添加/修改表单参数
      form: {
        // 产品ID
        productId: '',
        // 渠道ID
        deptId: '',
        // 产品名称
        name: '',
        // 产品logo
        logo: '',
        // 产品单价
        price: '',
        // 产品标签
        tag: '',
        // 产品机构信息
        info: '',
        // 最低额度
        lowAmount: '',
        // 最高额度
        highAmount: ''
      },
      tf_form: {
        // 产品ID
        productId: '',
        // 今日投放量
        todayNum: '',
        city: '',
        // 投放城市
        cityId: '',
        // 开启星期
        openWeek: [],
        // 开启时间
        startTime: '',
        // 结束时间
        endTime: '',
        // 最低年龄
        lowAge: '',
        // 最高年龄
        highAge: '',
        // 芝麻分
        zhimaCredit: [],
        // 资质需求
        zizhiNeed: [],
        // 条件关系
        allMeet: '0'
      },
      // 表单校验
      rules: {
        // { min: 2, max: 20, message: '长度在2到20个字符', trigger: 'blur' },
        productId: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        deptId: [
          { required: true, message: '所属渠道不能为空', trigger: 'blur' },
          { pattern: /^[0-9]+$/, message: '所属渠道参数不合法' }
        ],
        name: [
          { required: true, message: '产品名称不能为空', trigger: 'blur' },
          { pattern: /^[A-Za-z0-9\u4e00-\u9fa5\-\_]{2,16}$/, message: '产品名称由2-16位数字或字母、汉字、中/下划线组成！' }
        ],
        logo: [
          { required: true, message: 'logo不能为空', trigger: 'blur' }
        ],
        todayNum: [
          { required: true, message: '日投放量不能为空', trigger: 'blur' },
          { pattern: /^[0-9]{1,10}$/, message: '日投放量由1-10位数字组成！' }
        ],
        price: [
          { required: true, message: '产品单价不能为空', trigger: 'blur' },
          { pattern: /^[0-9]+(.[0-9]{2})?$/, message: '产品单价只支持数字，小数点后两位！' }
        ],
        tag: [
          { required: true, message: '产品标签不能为空', trigger: 'blur' },
          { pattern: /^[A-Za-z0-9\u4e00-\u9fa5\-\_]{1,50}$/, message: '产品标签由1-50位数字或字母、汉字、中/下划线组成！' }
        ],
        info: [
          { required: true, message: '机构信息不能为空', trigger: 'blur' },
          { pattern: /^[A-Za-z0-9\u4e00-\u9fa5\-\_]{1,100}$/, message: '机构信息由1-100位数字或字母、汉字、中/下划线组成！' }
        ],
        city: [
          { required: true, message: '投放城市不能为空', trigger: 'blur' }
        ],
        openWeek: [
          { required: true, message: '投放星期不能为空', trigger: 'blur' }
        ],
        startTime: [
          { required: true, message: '开启时间不能为空', trigger: 'blur' }
        ],
        endTime: [
          { required: true, message: '结束时间不能为空', trigger: 'blur' }
        ],
        lowAge: [
          { required: true, message: '最低年龄不能为空', trigger: 'blur' },
          { pattern: /^[0-9]{1,3}$/, message: '最低年龄由1-3位数字组成！' }
        ],
        highAge: [
          { required: true, message: '最高年龄不能为空', trigger: 'blur' },
          { pattern: /^[0-9]{1,3}$/, message: '最高年龄由1-3位数字组成！' }
        ],
        lowAmount: [
          { required: true, message: '最低贷款额度不能为空', trigger: 'blur' },
          { pattern: /^[0-9]{1,10}$/, message: '最低贷款额度由1-10位数字组成！' }
        ],
        highAmount: [
          { required: true, message: '最高贷款额度不能为空', trigger: 'blur' },
          { pattern: /^[0-9]{1,10}$/, message: '最高贷款额度由1-10位数字组成！' }
        ]
      }
    }
  },
  created() {
    this.getList()
    this.getChannelFun()
    this.getCityFun()
  },
  methods: {
    // 城市全选
    handleCheckAllChange(val) {
      // console.log(val)
      this.checkedCities = val ? this.cities : []
      if (val) {
        for (let index = 0; index < this.cities.length; index++) {
          if (this.cityVal.indexOf(this.cities[index]) === '-1') {
            this.cityVal.push(this.cities[index])
          }
        }
      } else {
        for (let index = 0; index < this.cities.length; index++) {
          if (this.cityVal.indexOf(this.cities[index]) !== '-1') {
            this.cityVal.splice(this.cityVal.indexOf(this.cities[index]), 1)
          }
        }
      }
      this.tf_form.city = this.cityVal.toString()
      // console.log(this.cityVal)
    },
    // 城市单选
    handleCheckedCitiesChange(value) {
      // console.log(value)
      const checkedCount = value.length
      this.checkAll = checkedCount === this.cities.length
      // 循环当前选中的城市
      for (let index = 0; index < value.length; index++) {
        if (this.cityVal.indexOf(value[index]) === '-1') {
          this.cityVal.push(value[index])
        }
      }
      // 循环已经存在的城市，删除取消的城市
      for (let index = 0; index < this.cityVal.length; index++) {
        if (value.indexOf(this.cityVal[index]) === '-1') {
          this.cityVal.splice(this.cityVal.indexOf(this.cityVal[index]), 1)
        }
      }
      // console.log(this.cityVal)
      this.tf_form.city = this.cityVal.toString()
    },
    /** 查询产品列表 */
    getList() {
      this.loading = true
      listProduct(this.queryParams).then(response => {
        // 单价做除法
        for (let index = 0; index < response.rows.length; index++) {
          response.rows[index].price = response.rows[index].price / 100
        }
        this.productList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 获取所有渠道
    getChannelFun() {
      getChannel().then(response => {
        this.options = response.data
      })
    },
    // 获取城市方法
    getCityFun() {
      getCity().then(response => {
        this.cityData = response.rows
        for (let index = 0; index < response.rows.length; index++) {
          // indexOf 返回-1表示不存在
          if (this.citySHeng.indexOf(response.rows[index].cprovince) === '-1') {
            // 获取所有的省
            this.citySHeng.push(response.rows[index].cprovince)
          }
        }
      })
    },
    // 获取市
    getCityS() {
      this.cities = []
      var pdnum = 0
      for (let index = 0; index < this.cityData.length; index++) {
        if (this.cityData[index].cprovince === this.citySHengstr) {
          this.cities.push(this.cityData[index].cname)
          if (this.cityVal.indexOf(this.cityData[index].cname) !== '-1') {
            pdnum++
          }
        }
      }
      // 判断全选状态
      if (pdnum === this.cities.length) {
        this.checkAll = true
      } else {
        this.checkAll = false
      }
      this.checkedCities = this.cityVal ? this.cityVal : []
    },
    // 修改产品状态
    statusUpList(row) {
      var param = {
        // 产品ID
        productId: row.productId,
        // 产品状态
        status: row.status
      }
      updateProduct(param).then(response => {
        if (response.code === 200) {
          this.$modal.msgSuccess('修改成功')
          this.getList()
        }
      }).finally(() => {
        this.getList()
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        productId: undefined,
        deptId: undefined,
        name: undefined,
        logo: undefined,
        price: undefined,
        tag: undefined,
        info: undefined,
        lowAmount: undefined,
        highAmount: undefined
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.productId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '添加产品'
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.title = '修改产品'
      this.form.productId = row.productId
      this.form.deptId = row.deptId
      this.form.name = row.name
      this.form.logo = row.logo
      this.form.price = row.price
      this.form.tag = row.tag
      this.form.info = row.info
      this.form.lowAmount = row.lowAmount
      this.form.highAmount = row.highAmount
      this.open = true
    },
    handleZZ(row) {
      // 编辑展示赋值
      this.tf_form.productId = row.productId
      this.tf_form.todayNum = row.todayNum
      this.tf_form.startTime = row.startTime
      this.tf_form.endTime = row.endTime
      this.tf_form.lowAge = row.lowAge
      this.tf_form.highAge = row.highAge
      this.tf_form.allMeet = row.allMeet

      // 将芝麻分转为数组
      if (row.zhimaCredit) {
        this.tf_form.zhimaCredit = row.zhimaCredit.split(',')
      } else {
        this.tf_form.zhimaCredit = []
      }
      // 将开启星期转为数组
      if (row.openWeek) {
        this.tf_form.openWeek = row.openWeek.split(',')
      } else {
        this.tf_form.openWeek = []
      }

      var zizhiNeed = []
      // fund 社保
      if (row.fund === '1') {
        zizhiNeed.push('1')
      }
      // has 公积金
      if (row.has === '1') {
        zizhiNeed.push('2')
      }
      // bdStatus 保险保单
      if (row.bdStatus === '1') {
        zizhiNeed.push('3')
      }
      // carProperty 车产
      if (row.carProperty === '1') {
        zizhiNeed.push('4')
      }
      // houseProperty 房产
      if (row.houseProperty === '1') {
        zizhiNeed.push('5')
      }

      if (zizhiNeed.length !== 0) {
        this.tf_form.zizhiNeed = zizhiNeed
      } else {
        this.tf_form.zizhiNeed = []
      }

      // 申明该产品已经配置得城市参数赋值，并且转为数组
      if (row.cityId) {
        var cityId = row.cityId.split(',')
      } else {
        // eslint-disable-next-line no-redeclare
        var cityId = []
      }

      // 获取第一个省名字,用于打开对话框时得展示
      var citySHengstr = ''
      // 获取第一个省下面所有得城市,用于打开对话框时得展示
      var citys = []
      // 用于判断是否展示全选状态
      var pdnum = 0
      // 获取展示的城市
      for (let index = 0; index < this.cityData.length; index++) {
        // 通过判断城市是否已经做过配置，判断城市code是否在产品配置中存在
        if (cityId.indexOf(this.cityData[index].ccode) !== '-1') {
          pdnum++
          if (!citySHengstr) {
            citySHengstr = this.cityData[index].cprovince
          }
        }
      }
      // 获取省下面所有得城市
      for (let index = 0; index < this.cityData.length; index++) {
        if (this.cityData[index].cprovince === citySHengstr) {
          citys.push(this.cityData[index].cname)
        }
      }
      // 如果相等则表示该省份为全选状态
      if (pdnum === citys.length) {
        this.checkAll = true
      }
      if (!row.city) {
        this.cityVal = []
      } else {
        // 当前产品投放城市
        this.cityVal = row.city.split(',')
      }

      // console.log(this.cityVal)
      // 当前产品投放城市
      this.tf_form.city = row.city
      // 省份
      this.citySHengstr = citySHengstr
      // 当前产品投放城市
      if (!row.city) {
        this.checkedCities = []
      } else {
        // 当前产品投放城市
        this.checkedCities = row.city.split(',')
      }

      this.cities = citys
      this.openzz = true
    },
    submitFormZZ() {
      this.$refs['tf_form'].validate(valid => {
        if (valid) {
          var cityId = []
          for (let index = 0; index < this.cityData.length; index++) {
            if (this.cityVal.indexOf(this.cityData[index].cname) !== '-1') {
              cityId.push(this.cityData[index].ccode)
            }
          }
          this.buttonLoading = true

          var param = {
            // 产品ID
            productId: this.tf_form.productId,
            // 今日投放量
            todayNum: this.tf_form.todayNum,
            // 投放城市
            cityId: cityId.toString(),
            // 开启星期
            openWeek: this.tf_form.openWeek.toString(),
            // 开启时间
            startTime: this.tf_form.startTime,
            // 结束时间
            endTime: this.tf_form.endTime,
            // 最低年龄
            lowAge: this.tf_form.lowAge,
            // 最高年龄
            highAge: this.tf_form.highAge,
            // 芝麻分
            zhimaCredit: this.tf_form.zhimaCredit.length > 0 ? this.tf_form.zhimaCredit.toString() : null,
            // 资质需求
            // zizhiNeed: [],
            // 条件关系
            allMeet: this.tf_form.allMeet
          }

          console.log(this.tf_form.zizhiNeed)

          if (this.tf_form.zizhiNeed.length) {
            // fund 社保
            if (this.tf_form.zizhiNeed.indexOf('1') !== '-1') {
              param.fund = 1
            } else {
              param.fund = 0
            }
            // has 公积金
            if (this.tf_form.zizhiNeed.indexOf('2') !== '-1') {
              param.has = 1
            } else {
              param.has = 0
            }
            // bdStatus 保险保单
            if (this.tf_form.zizhiNeed.indexOf('3') !== '-1') {
              param.bdStatus = 1
            } else {
              param.bdStatus = 0
            }
            // carProperty 车产
            if (this.tf_form.zizhiNeed.indexOf('4') !== '-1') {
              param.carProperty = 1
            } else {
              param.carProperty = 0
            }
            // houseProperty 房产
            if (this.tf_form.zizhiNeed.indexOf('5') !== '-1') {
              param.houseProperty = 1
            } else {
              param.houseProperty = 0
            }
          } else {
            // fund 社保
            param.fund = 0
            // has 公积金
            param.has = 0
            // bdStatus 保险保单
            param.bdStatus = 0
            // carProperty 车产
            param.carProperty = 0
            // houseProperty 房产
            param.houseProperty = 0
          }

          updateProduct(param).then(response => {
            if (response.code === 200) {
              this.$modal.msgSuccess('修改成功')
              this.openzz = false
              this.getList()
            }
          }).finally(() => {
            this.buttonLoading = false
          })
        }
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.buttonLoading = true
          if (this.form.productId != null) {
            this.form.price = this.form.price * 100
            updateProduct(this.form).then(response => {
              this.$modal.msgSuccess('修改成功')
              this.open = false
              this.getList()
            }).finally(() => {
              this.buttonLoading = false
            })
          } else {
            this.form.price = this.form.price * 100
            addProduct(this.form).then(response => {
              this.$modal.msgSuccess('新增成功')
              this.open = false
              this.getList()
            }).finally(() => {
              this.buttonLoading = false
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const productIds = row.productId || this.ids
      this.$modal.confirm('是否确认删除产品编号为"' + productIds + '"的数据项？').then(() => {
        this.loading = true
        return delProduct(productIds)
      }).then(() => {
        this.loading = false
        this.getList()
        this.$modal.msgSuccess('删除成功')
      }).finally(() => {
        this.loading = false
      })
    }
    /** 导出按钮操作 */
    // handleExport() {
    //   this.download('product/product/export', {
    //     ...this.queryParams
    //   }, `product_${new Date().getTime()}.xlsx`)
    // }
  }
}
</script>
